<template>
  <div class="login">
    <a-form class="login-form" @submit.prevent="doLogin" :autoFormCreate="(form) => this.form = form" :style="{'flex-direction': isMobile ? 'column' : 'row', 'width': isMobile ? '90vw' : '700px'}">
      <div class="form-lf">
        <div class="form-title" style="padding:0 30px;">郑州大学研究生教育支撑平台</div>
        <img src="@/assets/login/graduation.jpg" alt="">
      </div>
      <div class="form-rg">
        <div class="form-title">欢迎回来</div>
        <a-form-item
          fieldDecoratorId="name"
          :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入用户名', whitespace: true}]}">
          <a-input size="large" placeholder="用户名">
            <img slot="prefix" style="width: 16px" src="@/assets/login/user.png" alt="">
          </a-input>
        </a-form-item>
        <a-form-item
          fieldDecoratorId="password"
          :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入密码', whitespace: true}]}">
          <a-input size="large" type="password" placeholder="密码">
            <img slot="prefix" style="width: 16px" src="@/assets/login/pwd.png" alt="">
          </a-input>
        </a-form-item>
        <a-form-item fieldDecoratorId="yzm" :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入验证码', whitespace: true}]}">
          <a-input style="width: 55%;margin-right: 20px" placeholder="请输入验证码" />
          <img style="width: 80px" :src="'data:image/jpeg;base64,' +captcha.img" alt="">
        </a-form-item>
        <a-button :loading="loading" style="width: 100%; margin-top: 4px;border-radius: 10px!important" size="large" htmlType="submit" type="primary">
          登录
        </a-button>
        <!--<div class="form-rg-ft"> <span>科研平台</span> <span>云平台管理员</span> </div>-->
      </div>
    </a-form>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import {api} from '@/api'
export default {
  name: 'Login',
  data () {
    return {
      loading: false,
      captcha: {},
      error: '',
      activeKey: '1'
    }
  },
  computed: {
    ...mapState({
      isMobile: state => state.setting.isMobile
    }),
    systemName () {
      return this.$store.state.setting.systemName
    },
    copyright () {
      return this.$store.state.setting.copyright
    }
  },
  created () {
    this.getCaptcha()
    this.$db.clear()
    this.$router.options.routes = []
  },
  methods: {
    getCaptcha() {
      this.$api.auth.getCaptcha().then(res => {
        this.captcha = {...res.data }
        this.$nextTick(() => {
          this.form.setFieldsValue({
            uuid: res.data.uuid
          });
        })
      })
    },
    doLogin () {
      if (this.activeKey === '1') {
        // 用户名密码登录
        this.form.validateFields(['name', 'password', 'yzm'], (errors, values) => {
          if (!errors) {
            this.loading = true
            let name = this.form.getFieldValue('name')
            let password = this.form.getFieldValue('password')
            api.auth.login({
              ...values,
              username: name,
              password: password,
              xxdm: 10459,
              uuid: this.captcha.uuid
            }).then((r) => {
              let data = r.data
              this.saveLoginData(data)
              this.$api.menu.findByUserId(data.user.id).then((res) => {
                const asyncRouter = res.data
                localStorage.setItem('USER_ROUTER', JSON.stringify(asyncRouter))
                this.$router.push('/')
              })
              setTimeout(() => {
                this.loading = false
              }, 500)
            }).catch(() => {
              this.getCaptcha()
              setTimeout(() => {
                this.loading = false
              }, 500)
            })
          }
        })
      }
      if (this.activeKey === '2') {
        // 手机验证码登录
        this.$message.warning('暂未开发')
      }
    },
    regist () {
      this.$emit('regist', 'Regist')
    },
    // getCaptcha () {
    //   this.$message.warning('暂未开发')
    // },
    handleTabsChange (val) {
      this.activeKey = val
    },
    ...mapMutations({
      setToken: 'account/setToken',
      setExpireTime: 'account/setExpireTime',
      setPermissions: 'account/setPermissions',
      setRoles: 'account/setRoles',
      setUser: 'account/setUser',
      setTheme: 'setting/setTheme',
      setLayout: 'setting/setLayout',
      setMultipage: 'setting/setMultipage',
      fixSiderbar: 'setting/fixSiderbar',
      fixHeader: 'setting/fixHeader',
      setColor: 'setting/setColor'
    }),
    saveLoginData (data) {
      this.setToken(data.token)
      this.setExpireTime(data.exipreTime)
      this.setUser(data.user)
      this.setPermissions(data.permissions)
      this.setRoles(data.roles)
      this.setTheme(data.config.theme)
      this.setLayout(data.config.layout)
      this.setMultipage(data.config.multiPage === '1')
      this.fixSiderbar(data.config.fixSiderbar === '1')
      this.fixHeader(data.config.fixHeader === '1')
      this.setColor(data.config.color)
    }
  }
}
</script>

<style lang="less" scoped>
  .login-form{
    background-color: #fff;
    padding: 30px;
    display: flex;
    margin: 0 auto;
    .form-title{
      font-size: 30px;
      text-align: center;
      margin: 30px 0;
    }
    .form-lf{
      margin-right: 100px;
      width: 280px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .form-rg-ft{
      color: #c5c5c5;
      display: flex;
      justify-content: space-between;
      width: 120%;
      position: relative;
      left: -10%;
      margin: 30px 0;
      span:before{
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: #c5c5c5;
        border-radius: 50%;
        margin-right: 20px;
      }
    }
  }
</style>
